<template>
  <div class="index clearafter">
    <module-head></module-head>
    <div class="content flex">
      <div class="w220">
        <menu-list></menu-list>
      </div>
      <div class="w980 flex_full">
        <p class="flex flex_vcenter pdb20">
          <i class="titleTag"></i>
          <span class="fRedBig">生成门诊随访计划</span>
        </p>
        <div class="whiteBg">
          <ul class="flex wrap illInfoBox">
            <li>
              <label>姓 名：</label>
              <span>{{mainInfo.BRXM}}</span>
            </li>
            <li>
              <label>性 别：</label>
              <span>{{mainInfo.BRXB | sex}}</span>
            </li>
            <li>
              <label>年 龄：</label>
              <span>{{mainInfo.CSNY | old}}</span>
            </li>
            <li>
              <label>联系电话：</label>
              <span>{{mainInfo.LXDH}}</span>
            </li>
            <li>
              <label>证件类型：</label>
              <span></span>
            </li>
            <li>
              <label>证件号码：</label>
              <span></span>
            </li>
            <li>
              <label>出院科室：</label>
              <span>{{mainInfo.BRKSVALUE}}</span>
            </li>
            <li>
              <label>入院日期：</label>
              <span>{{mainInfo.RYRQ.slice(0,11)}}</span>
            </li>
            <li>
              <label>主管医生：</label>
              <span></span>
            </li>
            <li>
              <label>出院主诊断：</label>
              <span></span>
            </li>
          </ul>
          <ul class="formList flex">
            <li>
              <label>患者类型：</label>
              <input type="text" class="form-control" v-model="illType">
            </li>
            <li>
              <label>开始类型：</label>
              <select class="form-control" v-model="beginType">
                <option value="1">出院日期</option>
                <option value="2">手术日期</option>
                <option value="3">就诊日期</option>
                <option value="4">特定日期</option>
              </select>
            </li>
            <li>
              <label>起始时间</label>
              <input type="text" placeholder="请选择开始日期" class="form-control" id="startdate" v-model="startDate" />
            </li>
            <li>
              <button class="yellowBtn" @click="openModuleBox()">获取模板</button>
              <button class="yellowBtn ml20" @click="createPlan()">生成计划</button>
            </li>
          </ul>
          <div class="dbox mb20" v-for="(index, value) in moduleList">
            <p class="dboxTitle">第{{value.PLSX}}次</p>
            <div class="flex">
              <div style="width:80%">
                <ul class="flex flex_between pd20">
                  <li>
                    <span>名称：</span>
                    <span>{{value.SFMC}}</span>
                  </li>
                  <li>
                    <span>方式：</span>
                    <span>{{value.SFFS | sffs}}</span>
                  </li>
                  <li>
                    <span>执行次数：</span>
                    <span>{{value.ZXCS | zxcs}}次</span>
                  </li>
                  <li>
                    <span>间隔：</span>
                    <span>{{value.SJJG}}{{value.JGDW | jgdw}}</span>
                  </li>
                </ul>
                <ul class="flex">
                  <li>
                    <button class="pinkBtn ml20">{{value.YSMC}}</button>
                  </li>
                </ul>
              </div>
              <ul class="flex_full">
                <li class="yellowBtn blockCenter" @click="editModule(value, index)">修改</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" tabindex="-1" role="dialog" id="newPlanModal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">生成计划</h4>
          </div>
          <div class="modal-body">
            <table class="table table-striped table-hover">
              <thead>
              <tr>
                <th>日期</th>
                <th>名称</th>
                <th>方式</th>
                <th>次数</th>
                <th>问卷</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="item in planResultList">
                <td>{{item.SFSJ | timeStr}}</td>
                <td>{{item.SFMC}}</td>
                <td>{{item.SFFS | sffs}}</td>
                <td>{{item.ZXCS}}</td>
                <td>{{item.YSMC}}</td>
              </tr>
              </tbody>
            </table>
            <div class="modal-footer">
              <button class="longBtn center-block" @click="confirmPlan()">完成计划</button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->
    </div>
    <div class="modal fade" tabindex="-1" role="dialog" id="queryModal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">选择随访规则</h4>
          </div>
          <div class="modal-body">
            <table class="table table-striped table-hover">
              <thead>
              <tr>
                <th>随访标题</th>
                <th>随访大类</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="item in ruleList" @click="queryModuleByRule(item)" v-show="item.GLKS == 0 || item.GLKS == mainInfo.BRKS">
                <td>{{item.SFBT}}</td>
                <td>{{item.SFZL | SFZL}}</td>
              </tr>
              </tbody>
            </table>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->
    </div>
    <div class="modal fade" tabindex="-1" role="dialog" id="editRuleModal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">修改随访明细规则</h4>
          </div>
          <div class="modal-body">
            <ul class="formList">
              <li>
                <label>计划顺序</label>
                <input type="number" class="form-control" v-model="editParam.PLSX" placeholder="请输入数字">
              </li>
              <li>
                <label>计划名称</label>
                <input type="text" class="form-control" v-model="editParam.SFMC">
              </li>
              <li class="searchBox">
                <label>随访方式</label>
                <select class="form-control" v-model="editParam.SFFS">
                  <option value="1">电话随访</option>
                  <option value="2">当面随访</option>
                  <option value="3">视频随访</option>
                </select>
              </li>
              <li>
                <label>执行次数</label>
                <select class="form-control" v-model="editParam.ZXCS">
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="0">不限次</option>
                </select>
              </li>
              <li>
                <label>上次间隔 </label>
                <input type="text" class="form-control" v-model="editParam.SJJG" placeholder="请输入数字">
              </li>
              <li>
                <select class="form-control" v-model="editParam.JGDW">
                  <option value="1">日</option>
                  <option value="2">周</option>
                  <option value="3">月</option>
                  <option value="4">年</option>
                </select>
              </li>
              <li>
                <label>随访问卷</label>
                <select class="form-control" v-model="editPaper">
                  <option :value="item" v-for="item in paperList">{{item.YSMC}}</option>
                </select>
              </li>
            </ul>
          </div>
          <div class="modal-footer">
            <button class="longBtn center-block" @click="saveEditRule()">保存</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
  </div>
</template>

<script>
  import Public from 'assets/public.js'
  import 'assets/lib/laydate/laydate.js'
  import 'assets/lib/laydate/need/laydate.css'
  import 'assets/lib/laydate/skins/danlan/laydate.css'
  import moduleHead from 'components/module-head'
  import menuList from 'components/menu-list'
  import 'assets/lib/bootstrap-3.3.2/js/bootstrap.min.js'
  export default {
    data () {
      return {
        moduleList: [],
        mainInfo: {},
        startDate: '',
        beginType: '',
        ruleList: [],
        editParam: {},
        editIndex: '',
        editPaper: {},
        paperList: [],
        illType: '',
        selRule: {},
        planResultList: []
      }
    },
    components: {
      moduleHead, menuList
    },
    filters: {
      'sex' (val) {
        if (val == 1) {
          return '男'
        } else if (val == 2) {
          return '女'
        } else {
          return '不详'
        }
      },
      'old' (val) {
        if (val) {
          var year = val.slice(0,4)
          return new Date().getFullYear()-year
        }
      },
      'SFZL' (val) {
        if (val == 1) {
          return '慢病随访'
        } else if (val == 2) {
          return '出院普通随访'
        }else if (val == 3) {
          return '门诊普通随访'
        }
      },
      'sffs' (val) {
        if (val == 1) {
          return '电话随访'
        } else if (val == 2) {
          return '当面随访'
        } else if (val == 3) {
          return '视频随访'
        }
      },
      'jgdw' (val) {
        if (val == 1) {
          return '日'
        } else if (val == 2) {
          return '周'
        } else if (val == 3) {
          return '月'
        }else if (val == 4) {
          return '年'
        }
      },
      'zxcs' (val) {
        if (val == 0) {
          return '不限'
        } else {
          return val
        }
      },
      'timeStr' (val) {
        var time = new Date(val)
        var result = this.formatDate(time)
        return result
      }
    },
    watch: {

    },
    ready () {
      var self = this
      var mainInfo = window.location.href.split('?')[1]
      this.mainInfo = JSON.parse(decodeURIComponent(mainInfo.split('=')[1]))
      console.log(JSON.stringify(this.mainInfo))
      laydate({
        elem: '#startdate',
        choose: function(datas) { //选择日期完毕的回调
          self.startDate = datas + ' 10:00:00'
        }
      })
      this.queryPaperList()
    },
    methods: {
      createPlan () {
        $('#newPlanModal').modal('show')
      },
      confirmPlan () {
        $('#newPlanModal').modal('hide')
      },
      openModuleBox () {
        $('#queryModal').modal('show')
        this.queryRuleList('', 0, 0)
      },
      queryRuleList (SFBT, SFZL, SFKS) {
        var self = this
        $.ajax({
          type:"POST",
          url:Public.sfBaseUrl+"/NIS/cas/mobile/evaluation/v56_update1/get/rule",
          data:{
            SFBT: SFBT,
            SFZL: SFZL,
            SFKS: SFKS,
            token: sessionStorage.getItem('sfToken')
          },
          success:function(res){
            if (res.Data) {
              self.ruleList = res.Data
            }
          }
        })
      },
      queryModuleByRule (param) {
        $('#queryModal').modal('hide')
        this.queryModule(param.GZID)
        this.selRule = param
        var time = new Date(this.selRule.QSSJ)
        this.startDate = this.formatDate(time)+ ' 10:00:00'
        console.log('startdate='+this.startDate)
        this.beginType = this.selRule.QSLX
        console.log('rule='+ JSON.stringify(this.selRule))
        this.illType = this.selRule.HZLX
      },
      queryModule (id) {
        var self = this
        $.ajax({
          type:"POST",
          url:Public.sfBaseUrl+"/NIS/cas/mobile/evaluation/v56_update1/get/plantemplate",
          headers: {
            "token": sessionStorage.getItem('sfToken')
          },
          data:{
            SFGZ: id
          },
          success:function(res){
            if (res.Data) {
              self.moduleList = res.Data
            }
          }
        })
      },
      editModule (value, index) {
        $('#editRuleModal').modal('show')
        this.editParam = value
        this.editIndex = index
        for (var i = 0; i < this.paperList.length; i++) {
          if (value.YSXH == this.paperList[i].YSXH && value.BBH == this.paperList[i].BBH) {
            this.editPaper = this.paperList[i]
          }
        }
      },
      queryPaperList () {
        var self = this
        $.ajax({
          type:"POST",
          url:Public.sfBaseUrl+"/NIS/cas/mobile/evaluation/v56_update1/get/styleList",
          headers: {
            "token": sessionStorage.getItem('sfToken')
          },
          data:{
            jgid: '1'
          },
          success:function(res){
            if (res.Data) {
              self.paperList = res.Data
            }
          }
        })
      },
      saveEditRule () {
        this.moduleList[this.editIndex] = this.editParam
        this.moduleList[this.editIndex].YSXH = this.editPaper.YSXH
        this.moduleList[this.editIndex].BBH = this.editPaper.BBH
        this.moduleList[this.editIndex].YSMC = this.editPaper.YSMC
        this.moduleList[this.editIndex].Status = 'edit'
        $('#editRuleModal').modal('hide')
        console.log(JSON.stringify(this.moduleList))
      },
      createPlan () {
        var self = this
        if (this.beginType == 1 || this.beginType == 2) {
          Public.ajaxPrompt("请选择针对门诊病人的规则")
          return
        }
        var postdata = {
          BRLX: 2,
          ZYH: this.mainInfo.MZHM,
          SFZL: this.selRule.SFZL,
          SFBT: this.selRule.SFBT,
          HZLX: this.illType,
          QSLX: this.beginType,
          QSSJ: new Date(this.startDate),
          RYSJVALUE: this.mainInfo.RYRQ.slice(0,11)
        }
        postdata.JHMB = this.moduleList
        $.ajax({
          type:"POST",
          url:Public.sfBaseUrl+"/NIS/cas/mobile/evaluation/v56_update1/commit/buildplan",
          headers: {
            "token": sessionStorage.getItem('sfToken')
          },
          contentType: 'application/json',
          data:JSON.stringify(postdata),
          beforeSend: function (req) {
            req.setRequestHeader("Accept", "application/json");
          },
          success:function(res){
            if (res.Data) {
              Public.ajaxPrompt("生成计划成功")
              $('#newPlanModal').modal('show')
              self.planResultList = res.Data
            }
          }
        })
      },
      formatDate (now) {
        var year=now.getFullYear();
        var month=now.getMonth()+1;
        if (month<10) {
          month = '0'+month
        }
        var date=now.getDate()
        if (date<10) {
          date = '0'+date
        }
        return year+"-"+month+"-"+date;
      },
      confirmPlan () {
        var self = this
        var postdata = this.planResultList
        $.ajax({
          type:"POST",
          url:Public.sfBaseUrl+"/NIS/cas/mobile/evaluation/v56_update1/commit/finishplan",
          headers: {
            "token": sessionStorage.getItem('sfToken')
          },
          contentType: 'application/json',
          data:JSON.stringify(postdata),
          beforeSend: function (req) {
            req.setRequestHeader("Accept", "application/json");
          },
          success:function(res){
            if (res.Data) {
              Public.ajaxPrompt("已完成随访计划")
              $('#newPlanModal').modal('hide')
              setTimeout(function(){
                window.location.href = "visitInfoList.html"
              },2000)
            }
          }
        })
      }
    }
  }
</script>

<style scoped>
  @import '../../assets/reset.css';
  @import '../../assets/flex.css';
  @import '../../assets/lib/bootstrap-3.3.2/css/bootstrap.min.css';
  .illInfoBox>li{
    margin-right:20px;
  }
  .illInfoBox{
    border-bottom:2px solid #FBECEB;
    background-color: #FFFBF8;
    box-shadow: 0 3px 3px #FFFBF8;
    padding:20px;
    border-radius: 10px 10px 0 0;
  }
  .whiteBg{
    padding:0!important;
    border:2px solid #FBECEB;
  }
  .formList>li{
    display:flex;
    -webkit-display:flex;
    padding:10px;
    align-items: center;
  }
  .formList>li>label{
    width:130px;
  }
  .dbox{
    margin-left:20px;
    margin-right:20px;
  }
</style>
